<template>
	<div>
		<BasePopup v-model="localVisible" :titleT="title" titleIcon="_" @close="handleClose">
			<div class="px-[40px] pb-[20px]">
				<div class="info">
					<div v-for="item in details" :key="item.title" class="item">
						<div>{{ item.title }}</div>
						<div :class="item.contentClass">{{ item.content }}</div>
					</div>
				</div>
				<BaseButton type="primary" size="large" block @click="handleCopy" class="mt-[40px]">
					复制以上全部内容
				</BaseButton>
			</div>
		</BasePopup>
	</div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref, watch } from 'vue'
import { BaseButton, BasePopup } from '@/components/base'
import { showSuccess } from '@/hooks'

// 接收父组件传递的 isVisible 属性
const props = defineProps({
	isVisible: {
		type: Boolean,
		default: false
	},
	getCode: {
		type: String,
		default: ''
	},
	details: {
		type: Array,
		default: () => []
	},
	title: {
		type: String,
		default: ''
	}
})

// 本地状态，用于控制对话框的显示
const localVisible = ref(props.isVisible)
// 定义 emit 事件
const emit = defineEmits(['update:isVisible', 'submit'])

// 关闭模态框，通知父组件更新状态
const handleClose = () => {
	emit('update:isVisible', false)
}
watch(
	() => props.isVisible,
	async (val: boolean) => {
		localVisible.value = val
	}
)

const handleCopy = () => {
	const textToCopy = props.details.map((item) => `${item.title}：${item.content}`).join('\n')
	navigator.clipboard
		.writeText(textToCopy)
		.then(() => {
			console.log('复制成功')
			showSuccess('复制成功')
		})
		.catch((err) => {
			console.error('复制失败: ', err)
		})
}
</script>

<style lang="scss" scoped>
/* 可根据项目需求添加自定义样式 */
.button-create {
	border-radius: 25px;
	background-color: #7864ff;
	color: #fff;
	margin-top: 10px;
}

.info {
	.item {
		margin-bottom: 16px;

		& > div:first-child {
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0.0025em;
		}

		& > div:last-child {
			height: 48px;
			padding: 15px 12px 15px 12px;
			border-radius: 8px;
			background-color: #131a27;
			margin-top: 8px;
			color: #ffffffa3;
		}
	}
}
</style>
